<template>
  <YsRow>
    <div class="photos-title border_style">
      <p class="text_01">X射线探伤检测报告</p>
      <div class="report_code text_01">
        <label>报告编号</label>
        <div class="code_rigth">
          <!-- <YsInput v-model.trim="x"></YsInput> -->
          <YsInput v-model.trim="report_code"></YsInput>
        </div>
      </div>
    </div>
    <div class="photos-table border_style" v-if="editForm">
      <div class="border_style photos-row" v-for="(item,index)  in editForm">
        <div class="photos-col photos-col1 border_style text_01 ">{{item.field_name}}</div>
        <div class="td_ws photos-col photos-col2 text_01 ">
          <span v-if="preview||item.is_edit==0" class="text_01 " :title="item.photos_val" v-html="setIcon(item)">
          </span>
          <YsInput class="input-h" v-else v-model.trim="item.photos_val"></YsInput>
        </div>
      </div>
      <div class="border_style photos-row" v-if="editForm&&editForm.length% 2 != 0">
        <div class="photos-col photos-col1 border_style"></div>
        <div class="photos-col photos-col2"></div>
      </div>
    </div>
  </YsRow>
</template>
<script>
export default {
  name: 'oneTemplate',
  props: {
    preview: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    templateBean: {
      type: Object,
      default: () => {
        return {}
      }
    },
    reportDataBean: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    templateBean(v) {

      if (v.hasOwnProperty("report_code")) {
        this.report_code = v.report_code
      }
      if (v.hasOwnProperty("templateFields1")) {
        this.tplHeaderData = v.templateFields1
      }
    },
    reportDataBean(v) {
      if (v) {
        if (v.table_field_data1) {
          this.tplBodyData = v.table_field_data1
          this.photosDataBean(v.table_field_data1)
        } else {
          if (this.tplHeaderData.length > 0) {
            this.editForm = []
            this.tplHeaderData.map(v => {
              v.photos_val = {}
              v.photos_val = v.field_default_val
              this.editForm.push(v)
            })
          }
        }

      }
    },
  },
  data() {
    return {
      report_code: "",//报告编号
      tplHeaderData: [],
      tplBodyData: [],
      operateTelData: [],
      editForm: [], //绑定在表单上，用于数据渲染
      prevForm: [], //保存原本的数据，通过渲染的数据的改变与原本的数据进行对比
      editFormChanged: false, // 是否修改标识
    }
  },
  methods: {
    //替换箭头
    setIcon(item) {
      if (item.field_name == "底片标识号") {
       
        let characteristic = item.photos_val.replace(/jt|cl/g, function ($0, $1) {
          if ($0 == 'jt') {
            return " <span  class='icon iconfont icon-xiangshangjiantou'></span> "
          } else if ($0 == 'cl') {
            return " <span  class='icon iconfont  icon-shizijiantou'></span> "
          }
        })
        return characteristic
      } else {
        return item.photos_val
      }
    },
    //修改数据
    photosDataBean(curList) {
      for (var i = 0; i < this.tplHeaderData.length; i++) {
        for (var j = 0; j < curList.length; j++) {
          if (this.tplHeaderData[i].field_id == this.tplBodyData[j].values[0].column_id) {
            this.$set(this.tplHeaderData[i], 'photos_obj', this.tplBodyData[j])
            this.$set(this.tplHeaderData[i], 'photos_val', this.tplBodyData[j].values[0].value || this.tplHeaderData[i].field_default_val)
            break;
          } else {
            this.$set(this.tplHeaderData[i], 'photos_obj', null)
            this.$set(this.tplHeaderData[i], 'photos_val', this.tplHeaderData[i].hasOwnProperty('field_default_val') ? this.tplHeaderData[i].field_default_val : "")
          }
        }
      }
      this.editForm = this.tplHeaderData
      this.prevForm = JSON.parse(JSON.stringify(this.tplHeaderData))
    },
    //设置被编辑的内容
    setPhotosItem() {
      this.editForm.map((item, index) => {
        if (this.editForm[index].photos_val != this.prevForm[index].photos_val) {
          if (this.editForm[index].photos_obj) { //编辑
            let remData = {
              id: item.photos_obj.row_id,
              file_id: this.$route.query.file_id,
              tp_id: this.$route.query.template_id,
              data_class: item.field_class,
              tf_id: item.id,
              operator_type: 3, //操作标识：1-新增，2-删除，编辑可随意传
              reportDetailBeans: [
                {
                  id: item.photos_obj.values[0].row_id,
                  field_id: item.photos_obj.values[0].column_id,
                  report_val: item.photos_val
                }
              ]
            }
            this.operateTelData.push(remData)
          } else { //新增
            let addData = {
              file_id: this.$route.query.file_id,
              tp_id: this.$route.query.template_id,
              data_class: item.field_class,
              tf_id: item.id,
              operator_type: 1, //操作标识：1-新增，2-删除，编辑可随意传
              reportDetailBeans: [
                {
                  id: "",
                  field_id: item.field_id,
                  report_val: item.photos_val
                }
              ]
            }
            this.operateTelData.push(addData)
          }
        }
      })
    },
  }
}
</script>
<style scoped lang='less'>
.photos-title {
  height: 140px;
  width: 100%;
  border: 1px solid #e1e6f0;
  border-bottom: none;
  line-height: 140px;
  position: relative;

  p {
    text-align: center;
    font-size: 24px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
  }

  .report_code {
    position: absolute;
    right: 16px;
    bottom: 6px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    display: flex;
    justify-content: center;

    .code_rigth {
      width: 200px;
      margin-left: 10px;
    }
  }
}

.photos-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 58px;
  border: 1px solid #e1e6f0;

  .photos-row {
    margin-bottom: -1px;
    display: flex;
  }

  .photos-row:nth-child(odd) {
    border-right: 1px solid #cfd7e5;
    border-bottom: 1px solid #cfd7e5;
  }

  .photos-row:nth-child(even) {
    border-bottom: 1px solid #cfd7e5;
  }

  .photos-col {
    width: 50%;
    height: 100%;
    font-size: 16px;
    line-height: 58px;
    padding: 0 16px;
    // text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .photos-col1 {
    border-right: 1px solid #e1e6f0;
  }

  /deep/ .photos-col2 {
    .ivu-input {
      height: 52px;
      line-height: 52px;
      border: none !important;
    }
  }
}

.td_ws {
  max-width: 350px !important;
}

@media print {
  .photos-table {
    width: 100%;
  }

  .photos-row {
    border-bottom: 1px solid #e1e6f0 !important;
  }
}
</style>
